<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>AI xiaozhi</title>
  <link href="vendors/videojs/video-js.css" rel="stylesheet">
  <link rel="stylesheet" href="css/style.css">
  <script src="vendors/jquery-2.1.3.min.js"></script>
  <script src="vendors/socket.io-1.3.7.js"></script>
  <script src="vendors/threejs/three.min.js"></script>
  <script src="vendors/threejs/Projector.js"></script>
  <script src="vendors/threejs/CanvasRenderer.js"></script>

  <script src="js/makeblockhd/base.js"></script>
  <script src="js/message.js"></script>
  <script src="js/makeblockhd/action.js"></script>
  <script src="js/makeblockhd/control.js"></script>
  <script src="js/makeblockhd/data.js"></script>
  <script src="js/makeblockhd/hostInterface.js"></script>
  <script src="js/makeblockhd/settings.js"></script>
  <script src="js/sensorAction.js"></script>
  <script src="js/makeblockhd/sensors.js"></script>
  <script src="js/ai.js"></script>
</head>
<body>

  <div class="sensors">
      <table>
        <!-- <tr>
          <td>ULTRASONIC: </td>
          <td class="ULTRASONIC"></td>
        </tr> -->
        <tr>
          <td>LINEFOLLOW: </td>
          <td class="LINEFOLLOW"></td>
        </tr>
        <tr>
          <td>LIGHTSENSOR: </td>
          <td class="LIGHTSENSOR"></td>
        </tr>
        <!-- <tr>
          <td col="3">GYROSCOPE: </td>
          <td class="GYROSCOPE-x">1</td>
        </tr>
        <tr>
          <td></td>
          <td class="GYROSCOPE-y">2</td>
        </tr>
        <tr>
          <td></td>
          <td class="GYROSCOPE-z">3</td>
        </tr> -->
      </table>
    </div>

  <!-- <div class="wrapper wrapper-mirror">
    <img class="pic" src="../images/xiaozhi.png">
    <div class="box box-up"><div class="text">Makeblock</div></div>
    <div class="box box-down"><div class="text">Makeblock</div></div>
    <div class="box box-left"><div class="text">Makeblock</div></div>
    <div class="box box-right"><div class="text">Makeblock</div></div>
  </div> -->

  <!-- <div class="wrapper wrapper-mirror-180">
    <div class="box box-right"><div class="text">Makeblock</div></div>
  </div> -->

  <div id="container"></div>

  <img src="images/ball.gif" alt="" class="ball">

  <div class="light">
    <div class="mask"></div>
    <img src="images/timg2.png" alt="" class="timg">
  </div>

  <script src="vendors/videojs/video.js"></script>
  <script src="js/3d.js"></script>
</body>
</html>